<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="shortcut icon" href="http://static.bootcss.com/www/assets/ico/apple-touch-icon-precomposed.png" >
	<title>注册</title>
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="http://www.bootcss.com/p/buttons/css/buttons.css">
	<link rel="stylesheet" type="text/css" href="../css/messenger-theme-future.css">
	<link rel="stylesheet" type="text/css" href="../css/messenger.css">
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">
					<img alt="注册" src="">
				</a>
			</div>
		</div>
	</nav>
	<nav class="navbar">
		<div class="col-sm-4 col-sm-offset-4">
			<form action="/reg" method="post">
				<div class="form-group">
					<label for="exampleInputEmail1">User Name</label>
					<input type="text" class="form-control" name="name" id="username" placeholder="Name">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">Password</label>
					<input type="password" class="form-control" name="password" id="Password" placeholder="Password">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">Repeat Password</label>
					<input type="password" class="form-control" name="rePassword" id="RePassword" placeholder="Repeat Password">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">Email</label>
					<input type="email" class="form-control" name="email" id="email" placeholder="Email">
				</div>
				<button id="submit" type="submit" class="button button-glow button-rounded button-raised button-primary" style="display: block ;margin: 0px auto ;" disabled="disabled">Submit</button>
			</form>
		</div>
	</nav>
</body>
<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/messenger.min.js"></script>
<script type="text/javascript" src="../js/messenger-theme-future.js"></script>
<script type="text/javascript">
	//变量与配置
	var status1 = false, status2 = false, status3 = false, status4 = false, status5 = false;
	var patt = new RegExp(/^\w{6,16}$/)
	var patt2 = new RegExp(/[\@]+[\w]+(\.com)/)
	Messenger.options = {
		extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
		theme: 'air'
	}

	//ajax查询用户名
	function selectName(name, callback){
		$.ajax({
			url:'reg/ajaxUsername?selectName=' + name,
			type:'get',
			success:function(date){
				if (date.status && name != '') {
					Messenger().post("此用户名可以注册");
					status1 = true
					callback()
				} else {
					Messenger().post("用户名已存在");
					status1 = false
					callback()
				}
			}
		})
	}

	//判断所有status
	function checkStatus(){
		if (status1 && status2 && status3 && status4 && status5) {
			$('#submit').removeAttr('disabled')
		} else {
			console.log('1:'+status1+' 2:'+status2+' 3:'+ status3+' 4:'+status4+' 5:'+status5)
			$('#submit').attr({'disabled':'disabled'})
		}
	}

	//用户名的判断
	$('#username').bind('input propertychange', function() {
		selectName($(this).val(), function(){
			checkStatus()
		})
	})

	//密码的长度
	$('#Password').bind('input propertychange', function() {
		var value1 = $(this).val()
		var value2 = $('#RePassword').val()
		if (patt.test(value1)) {
			status2 = true
			Messenger().post("密码合格");
		} else {
			status2 = false
			Messenger().post("密码不合格");
		}
		if (value1 == value2 && value1 != '') {
			status5 = true
		} else {
			status5 = false
		}
		checkStatus()
	})
	
	//重复密码是否相同
	$('#RePassword').bind('input propertychange', function() {
		var value1 = $('#Password').val()
		var value2 = $(this).val()
		if (value2 == value1) {
			status3 = true
			status5 = true
			Messenger().post("重复密码合格");
		} else {
			status3 = false
			Messenger().post("重复密码不合格");
		}
		checkStatus()
	})

	//邮箱
	$('#email').bind('input propertychange', function() {
		var value = $(this).val()
		if (patt2.test(value)) {
			status4 = true
			Messenger().post("邮箱 success");
		} else {
			status4 = false
		}
		checkStatus()
	})
	
</script>
</html>